<template>
  <div style="height: 100%;background-color: #01001C;">
    <div class="conten">
      <el-row>
        <el-col :span="24"><img class="video" src="../../assets/imgs/dy.png"><p style="color:#FFFFFF;font-size:5px;float: left;margin: 13px 43px;">IOT环控</p></el-col>
        <div style="height: 1px;margin-top: 30px;width: 90%;background-image: linear-gradient(90deg, #1D3CA0, #020B1F);" />
      </el-row>
      <el-row>
        <!-- <hr style="height: 1px;border: none;border-top:2px dotted rgb(21,46,100);"> -->
        <div v-for="(item,index) in iotList" :key="index+'camera5'" class="camera5">
          <p style="color:#FFFFFF;font-size:12px;float: left;margin: 13px 13px;">{{ item.name }}</p>
          <div style="float: right;margin: 0 30px;">
            <el-breadcrumb separator="|">
              <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF" @click="sendCommand(item,'open')">开</el-button></el-breadcrumb-item>
              <el-breadcrumb-item><el-button type="text" style="color:#FFFFFF" @click="sendCommand(item,'close')">关</el-button></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
      </el-row>
      <el-row v-if="iotList.length===0">
        <p style="color: #999999;text-align: center;font-size: 12px;margin-top: 16%;">暂未配置IOT设备</p>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAllTribunalEquipmentListByType, sendEquipmentCommand } from '@/api/tribunalEquipment'
export default {
  name: '',
  props: {
    tribunal3: {
      type: Number, // 类型
      default: () => {
      } // 默认值
    }
  },
  data() {
    return {
      week: null,
      isShow: false,
      times: null,
      times2: null,
      iotList: [],
      TribunalOptions: [],
      courtCode: null,
      tribunalCode: this.tribunal,
      iot: {
        tribunalCode: this.tribunal,
        typeId: '3'
      }
    }
  },
  watch: {
    tribunal3(newvalue) {
      this.iot.tribunalCode = newvalue
      if (this.iot.tribunalCode != null) {
        this.getAllTribunalEquipmentListByType()
      }
    }
  },
  created() {
  },
  methods: {
    getAllTribunalEquipmentListByType() {
      getAllTribunalEquipmentListByType(this.iot).then(response => {
        this.iotList = response.data
      })
    },
    sendCommand(val, type) {
      val.operation = type
      sendEquipmentCommand(val).then(response => {
        this.$message({
          message: '发送成功',
          type: 'success'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .conten{
      width: 100%;
      height: 100%;
      box-shadow: 0px 0px 30px #2243B2 inset
    }
    .video{
      width: 16px;
      height: 16px;
      position: absolute;
      margin: 10px 20px;
    }
    .camera {
      width: 130px;
      height: 64px;
      font-size: 5px;
      color: #FFFFFF;
      float: left;
      margin-top: 5px;
      margin-left: 15px;
      border-radius: 5px;
      background-image: linear-gradient(to top,#01001C,#1D399B);
    }
     .camera5 {
      width: 100%;
      height: 54px;
      text-align: center;
      font-size: 4px;
      color: #FFFFFF;
      float: left;
      // margin-left: 15px;
      border-radius: 5px;
      border: 1px dotted rgb(21,46,100);
      // background-image: linear-gradient(to top,#1D399B,#01001C);
    }
</style>
